<template>
  <el-cascader
    v-model="areaData"
    placeholder="请选择地址"
    :options="addressData"
    :props="props"
    @change="handleCascaderChange"
  />
</template>

<script>
import addressThreeData from './citysThree.json'
import addressDoubleData from './citysDouble.json'

export default {
  name: 'AddressCascader',
  props: {
    area: {
      type: String,
      default: null
    },
    level: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      addressData: [],
      props: { value: 'label' },
      areaData: [],
      splidType: 'dot'// 字符串分割符号
    }
  },
  created() {
    if (this.level === 3) {
      this.addressData = addressThreeData
    } else {
      this.addressData = addressDoubleData
    }
    var data = this.area
    if (data.indexOf(',') > -1) {
      this.areaData = data.split(',')
      this.splidType = 'dot'
    }
    if (data.indexOf(' ') > -1) {
      this.areaData = data.split(' ')
      this.splidType = 'space'
    }
  },
  methods: {
    handleCascaderChange(val) {
      var newArea = null
      if (this.splidType === 'dot') {
        newArea = val.join(',')
      }
      if (this.splidType === 'space') {
        newArea = val.join(' ')
      }
      this.$emit('handleCascaderChange', newArea)
    }
  }
}
</script>

<style scoped>
</style>
